<template>
  <div>
    <h3>自定义指令</h3>
    <!-- <div v-for="(item, index) in list" :key="index">
      <img style="width: 300px; height: 800px" v-lazy="item" alt="" />
    </div> -->
    <!-- <p v-wang="111111">我是p标签</p> -->
    <!-- <p v-wang="false">我是p标签</p> -->
    <!-- <p>
          <input type="text">
      </p>

      <p>
          <input v-fou type="text">
      </p> -->

    <div id="box">
      <input v-ruls v-model="num" type="text" />
    </div>

    <!-- 图片懒加载 -->
  </div>
</template>

<script>
export default {

    
  data() {
    return {
      num: "",
      list: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F031H0111515%2F20031G11515-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647155144&t=7d47e42d82114e38590f37a98e9605e0",
        "https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799",
        "https://img2.baidu.com/it/u=220990409,124547830&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=821789338,3694385318&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=144586780,3628411690&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      ],
    };
  },
  // 自定义指令(局部)
  directives: {
    // fou(el) {
    //     // el.focus()
    // },
    // ruls(el) {
    //     console.log(el)
    // }

    // fou: {
    //     // 当被绑定的元素插入到 DOM 中时……
    //     inserted(el) {
    //         el.focus()
    //     }
    // },

    ruls: {
      
      update(el) {
        let box = document.getElementById("box");
        let p = document.createElement("p");

        if (box.children.length === 1) {
            // 添加提示消息
            p.innerHTML = "请输入五位以上"
            p.style.color = "red"
            p.id = "ppp"
            box.appendChild(p)
        } else {
            if (el.value.length > 5) {
                let p2 = document.getElementById("ppp");
                p2.style.display = "none"
            }
        }














        // if (box.children.length === 1) {
        //   p.innerHTML = "输入内容要大于5";
        //   p.style.color = "red";
        //   p.id = 'ppp'
        //   box.appendChild(p);
        // } else {
        //   //   console.log(el.value.length)
        //   if (el.value.length > 5) {
        //       let p2 = document.getElementById('ppp')
        //       p2.style.display = "none"
              
        //   }
        // }







        // console.log(el.value.length)
        // if (el.value.length > 5) {
        //   p.style.display = "none";
        // } else {
        //   console.log("else");
        //   p.style.display = "block";
        //   //
        // }

        // if (box.children.length > 1) {
        // } else {
        //   p.innerHTML = "输入内容要大于5";
        //   p.style.color = "red";
        //   box.appendChild(p);
        // }

        // // console.log(el.value.length)
        // if (el.value.length > 5) {
        //   p.style.display = "none";
        // } else {
        //   console.log("else");
        //   p.style.display = "block";
        //   //
        // }
      },
    },

    // wang(el, option) {
    //     if (option.value) {
    //         el.style.display = "block"
    //     } else {
    //         el.style.display = "none"
    //     }
    //     // el 当前dom元素
    //     // option  指令的配置项
    //     console.log(el, option)
    // }
  },
};
</script>

<style>
</style>